<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>  
<!DOCTYPE html>  
<html>  
<head>  
    <meta charset="UTF-8">  
    <title>探索中国</title>  
    <style>  
        /* CSS样式，可以根据需要调整 */  
        body {  
            font-family: Arial, sans-serif;  
            background-color: #99BBFF;  
            margin: 0;  
            padding: 0;  
        }  
          
        .container {  
            max-width: 1200px;  
            margin: 0 auto;  
            padding: 20px;  
            background-color: #fff;  
            box-shadow: 0 0 10px rgba(0,0,0,0.1);  
            margin-top: 50px;  
        }  
          
        h1 {  
            text-align: center;  
            color: #333;  
        }  
          
        .destination {  
            margin-bottom: 30px;  
        }  
          
        .destination img {  
            width: 100%;  
            height: auto;  
            display: block;  
            margin-bottom: 10px;  
        }  
          
        .destination h2 {  
            color: #555;  
        }  
          
        .destination p {  
            color: #777;  
        }  
          
      .yuding {  
            color: #FFFFFF; 
            background-color: #888888; 
            height:200px;
        }  
         
          
        .container2 {  
            max-width: 600px;  
            margin: 0 auto;  
            padding: 20px;  
            background-color: #DDDDDD;  
            box-shadow: 0 0 10px rgba(0,0,0,0.1);  
            margin-top: 50px;  
        }  
          
       
          
        .form-group {  
            margin-bottom: 20px;  
        }  
          
        .form-group label {  
            display: block;  
            font-weight: bold;  
            margin-bottom: 5px;  
        }  
          
        .form-group input[type="text"],  
        .form-group input[type="email"],  
        .form-group input[type="date"] {  
            width: 100%;  
            padding: 5px;  
            border: 1px solid #ccc;  
            border-radius: 3px;  
        }  
          
        .form-group textarea {  
            width: 100%;  
            height: 100px;  
            padding: 5px;  
            border: 1px solid #ccc;  
            border-radius: 3px;  
        }  
          
        .submit-btn {  
            background-color: #4CAF50;  
            color: white;  
            padding: 10px 20px;  
            border: none;  
            border-radius: 4px;  
            cursor: pointer;  
        }  
          
        .submit-btn:hover {  
            background-color: #45a049;  
        }  
          
        .error {  
            color: red;  
            font-weight: bold;  
        }  
    </style>  
</head>  
<body>  
    <div class="container">  
        <h1>探索中国：发现美丽与奇迹</h1>  
          
        <!-- 目的地推荐 -->  
        <div class="destination">  
            <img src="https://img.zcool.cn/community/010e2d5de0f549a80120686b802e63.jpg@1280w_1l_2o_100sh.jpg" alt="北京故宫">  
            <h2>北京故宫</h2>  
            <p>故宫是世界上现存规模最大、保存最为完整的木质结构古建筑群之一。</p>  
        </div>  
          
        <div class="destination">  
            <img src="https://img.zcool.cn/community/0173a0566425d332f8754573771e21.jpg@1280w_1l_2o_100sh.jpg" alt="张掖丹霞">  
            <h2>张掖丹霞景区</h2>  
            <p>张掖丹霞地貌在方圆五十平方公里山地丘陵地带，有造型奇特，色彩斑斓，气势磅礴的丹霞地貌。</p>  
        </div>  
          <div class="destination">  
            <img src="https://ts1.cn.mm.bing.net/th/id/R-C.6620e73adcf420598c8c4d569b41a375?rik=9hQgGZAlXLyZ8Q&riu=http%3a%2f%2fnews.cjn.cn%2fgnxw%2f202012%2fW020201214667484375310.jpeg&ehk=74nMr8bh171Re7XL2T5Qu%2bKdUpEnw4%2bu4ANw7dNXucg%3d&risl=&pid=ImgRaw&r=0" alt="西安兵马俑">  
            <h2>西安兵马俑</h2>  
            <p>兵马俑是中国历史上著名的考古发现之一，被誉为“世界第八大奇迹”。</p>  
        </div>
        <div class="destination">  
            <img src="https://img1.qunarzz.com/travel/d7/1604/46/6f70dc282475d1f7.jpg_480x360x95_72474f89.jpg" alt="成都杜甫草堂">  
            <h2>成都杜甫草堂</h2>  
            <p>杜甫草堂，是中国唐代大诗人杜甫流寓成都时的故居，杜甫先后在此居住近四年，创作诗歌240余首。</p>  
        </div>
        <div class="destination">  
            <img src="https://ts1.cn.mm.bing.net/th/id/R-C.5236c8515ed830ab889a5af1ef7f104e?rik=5r4kmeoZQyq3aA&riu=http%3a%2f%2fimg.pconline.com.cn%2fimages%2fphotoblog%2f9%2f2%2f2%2f0%2f9220679%2f20097%2f5%2f1246808852710.jpg&ehk=CWSovPWrn%2fIjDK2mvvK25p3Ov%2b5jVROqx4QDqYaVj7o%3d&risl=&pid=ImgRaw&r=0" alt="新疆天山">  
            <h2>新疆天山</h2>  
            <p>天山山脉，世界七大山系之一，位于地球上最大的一块陆地欧亚大陆腹地，是世界上最大的独立纬向山系，同时也是世界上距离海洋最远的山系和全球干旱地区最大的山系。</p>  
        </div>
        <!-- 更多目的地... -->  
          
        <!-- 预订服务 --> 
        <div class="yuding">
         <h2>预订服务：轻松出行</h2>  
        <p>我们提供全面的旅行预订服务，包括景点门票、酒店住宿等。立即预订，开始您的中国之旅吧！</p> 
         </div> 
         <div class="container2">  
        <h1>预定出行申请表</h1>  
          
        <form action="submitBooking.jsp" method="post">  
            <!-- 姓名 -->  
            <div class="form-group">  
                <label for="name">姓名:</label>  
                <input type="text" id="name" name="name" required>  
            </div>  
              
            <!-- 电子邮件 -->  
            <div class="form-group">  
                <label for="email">电子邮件:</label>  
                <input type="email" id="email" name="email" required>  
            </div>  
              
            <!-- 联系电话 -->  
            <div class="form-group">  
                <label for="phone">联系电话:</label>  
                <input type="text" id="phone" name="phone" required>  
            </div>  
              
            <!-- 出行日期 -->  
            <div class="form-group">  
                <label for="travelDate">出行日期:</label>  
                <input type="date" id="travelDate" name="travelDate" required>  
            </div>  
              
            <!-- 目的地 -->  
            <div class="form-group">  
                <label for="destination">目的地:</label>  
                <input type="text" id="destination" name="destination" required>  
            </div>  
              
            <!-- 备注 -->  
            <div class="form-group">  
                <label for="remarks">备注:</label>  
                <textarea id="remarks" name="remarks"></textarea>  
            </div>  
              
            <!-- 提交按钮 -->  
            <input type="submit" value="提交预定" class="submit-btn">  
        </form>  
    </div>  
        
      
        </div>  
      
</body>  
</html>